<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-date-picker
        v-model="listQuery.dateTime"
        style="positon:relative;top:1px"
        type="daterange"
        format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <el-select v-model="listQuery.orgId" style="width: 140px" placeholder="选择机构" class="filter-item">
        <el-option
          v-for="(item,index) in OrgList"
          :key="index"
          :label="item.orgName"
          :value="item.id"
        />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
     <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出
      </el-button> -->
    </div>

    <el-row>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column label="统计信息" align="center">
          <el-table-column
            prop="name1"
            label="是否满意"
            width="180"
          />
          <el-table-column
            prop="name2"
            label="满意程度"
            align="center"
          />
          <el-table-column
            prop="name3"
            label="柱状图"
            width="180"
            align="center"
          >
            <template slot-scope="{row}">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="parseInt(row.name3)" />
            </template>
          </el-table-column>
          <el-table-column
            prop="name4"
            label="数量"
            align="center"
          />
          <el-table-column
            prop="name5"
            label="合计"
            width="180"
            align="center"
          />
          <el-table-column
            prop="name6"
            label="占比"
            align="center"
          />
          <el-table-column
            prop="name7"
            label="合计占比"
            align="center"
          />
        </el-table-column>

      </el-table>
    </el-row>
    <el-row style="margin-top:20px">
      <el-col>
        <div class="grid-content bg-purple">
          <div class="title-container">
            <span>满意柱状图</span>
          </div>
          <div class="chart-container">
            <chart v-if="list.length>0" id="chart1" height="300px" width="100%" :set-option-list="list" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style >
  .filter-container .filter-item{
    margin-bottom:0
  }
</style>
<script>
import Chart from '@/components/Charts/BarChart'
import { getBusinessTotal } from '@/api/decisionala'

import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
export default {
  name: 'Mechanism',
  components: { Chart },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      listLoading: true,
      // listQuery: {
      //   orgId: '',
      //   dateTime: ''
      // },
      // OrgList: [],
      downloadLoading: false,
      tableData: [{
        name1: '满意度',
        name2: '非常满意',
        name3: '0',
        name4: '0',
        name5: 0,
        name6: '0%',
        name7: '0%'
      }, {
        name1: '满意度',
        name2: '满意',
        name3: '0',
        name4: '0',
        name5: 0,
        name6: '0%',
        name7: '0%'
      }, {
        name1: '满意度',
        name2: '基本满意',
        name3: '0',
        name4: '0',
        name5: 0,
        name6: '0%',
        name7: '0%'
      }, {
        name1: '不满度',
        name2: '不满意',
        name3: '0',
        name4: 0,
        name5: 0,
        name6: '0%',
        name7: '0%'
      }, {
        name1: '未评价',
        name2: '未评价',
        name3: '0',
        name4: 0,
        name5: 0,
        name6: '0%',
        name7: '0%'
      }]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 4 || columnIndex === 6) {
        if (rowIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1
          }
        } else if (rowIndex === 1 || rowIndex === 2) {
          return {
            rowspan: 0,
            colspan: 0
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    getList() {
      this.listLoading = true
      this.list = []
      // const { dateTime, orgId } = this.listQuery
      // console.log('TCL: getList -> dateTime', dateTime)
      getBusinessTotal().then(response => {
        const { dataList, totalCount } = response.data
        this.list = dataList
        this.tableData = [{
          name1: '满意度',
          name2: '非常满意',
          name3: totalCount['verySatisfiedRate'], // 非常满意占比
          name4: totalCount['verySatisfiedCount'], // 非常满意数量
          name5: totalCount['satisfiedTotal'], // 满意合计
          name6: totalCount['verySatisfiedRate'], // 非常满意占比
          name7: totalCount['satisfiedTotalRate']
        }, {
          name1: '满意度',
          name2: '满意',
          name3: totalCount['satisfiedRate'], // 满意占比
          name4: totalCount['satisfiedCount'], // 满意数量
          name5: totalCount['satisfiedTotal'], // 满意合计
          name6: totalCount['satisfiedRate'], // 满意占比
          name7: '100%'
        }, {
          name1: '满意度',
          name2: '基本满意',
          name3: totalCount['basicSatisfiedRate'], // 基本满意占比
          name4: totalCount['basicSatisfiedCount'], // 基本满意数量
          name5: totalCount['satisfiedTotal'], // 满意合计
          name6: totalCount['basicSatisfiedRate'], // 基本满意占比
          name7: '100%'
        }, {
          name1: '不满度',
          name2: '不满意',
          name3: totalCount['dissatisfiedRate'], // 不满意占比
          name4: totalCount['dissatisfiedCount'], // 不满意数量
          name5: totalCount['dissatisfiedCount'], // 不满意合计
          name6: totalCount['dissatisfiedRate'], // 不满意占比
          name7: totalCount['dissatisfiedRate'] // 不满意占比
        },
        {
          name1: '未评价',
          name2: '未评价',
          name3: totalCount['untreatedRate'], // 未评价占比
          name4: totalCount['untreatedCount'], // 未评价数量
          name5: totalCount['satisfiedTotal'], // 未评价合计
          name6: totalCount['untreatedRate'], // 未评价占比
          name7: '100%'
        }]
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      // this.listQuery.page = 1
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>
